<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>注册</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="/static/css/mdb.min.css">
  <!-- Custom styles -->
  <style>
    html, body, header,
    .view {
      height: 100%;
    }

    @media (min-width: 560px) and (max-width: 740px) {
      html, body, header,
      .view {
        height: 650px;
      }
    }

    @media (min-width: 800px) and (max-width: 850px) {
      html, body, header,
      .view {
        height: 650px;
      }
    }
  </style>
</head>

<body class="landing-page">
<!-- Main Navigation -->
<header>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <div class="container">
      <a class="navbar-brand" href="#"><strong>欧桥数字化管理系统</strong></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
              aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  <!-- Intro Section -->
  <section class="view intro-2">
    <div class="mask rgba-gradient">
      <div class="container h-100 d-flex justify-content-center align-items-center">
        <div class="d-flex align-items-center content-height">
          <div class="row flex-center pt-5 mt-3">
            <div class="col-md-6 text-center text-md-left mb-5">
              <div class="white-text">
                <h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">欢迎注册！
                </h1>
                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">
                  全村有耕地总面积1129.5亩(其中：田134亩，地995.5亩)，人均耕地1.66亩，主要种植玉米.马铃薯.水稻等作物；
                  拥有林地2055亩，其中经济林果地83亩，人均经济林果地.12亩，主要种植藤梨等经济林果；水面面积30亩，
                  其中养殖面积0亩；草地214亩；荒山荒地222亩，其他面积170亩。有煤等资源。</h6>
                <br>
                <a href="/" class="btn btn-outline-white btn-rounded wow fadeInLeft" data-wow-delay="0.3s">了解更多</a>
              </div>
            </div>

            <div class="col-md-6 col-xl-5 offset-xl-1">
              <!-- Form -->
              <div class="card wow fadeInRight" data-wow-delay="0.3s">
                <div class="card-body">
                  {% csrf_token %}
                  <form id="user_register_form" onsubmit="return false">
                    <div class="text-center">
                      <h3 class="white-text"><i class="fas fa-user white-text"></i> 注册</h3>
                      <hr class="hr-light">
                    </div>
                    <div class="md-form">
                      <i class="fas fa-user prefix white-text"></i>
                      <input type="text" name="username" class="form-control">
                      <label for="form3" class="white-text">用户名</label>
                    </div>
                    <div class="md-form">
                      <i class="fas fa-envelope prefix white-text"></i>
                      <input type="text" name="fullname" class="form-control">
                      <label for="form2" class="white-text">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                    </div>
                    <div class="md-form">
                      <i class="fas fa-phone prefix white-text"></i>
                      <input type="text" name="phone" class="form-control">
                      <label for="form2" class="white-text">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
                    </div>
                    <div class="md-form">
                      <i class="fas fa-lock prefix white-text"></i>
                      <input type="password" name="password" class="form-control">
                      <label for="form4" class="white-text">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    </div>
                    <div class="text-center mt-4">
                      <button class="btn btn-light-blue btn-rounded" id="register_submit">
                        提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交
                      </button>
                      <hr class="hr-light mb-3 mt-4">
                      <div class="inline-ul text-center d-flex justify-content-center">
                        <label>已有账号？&nbsp;&nbsp;</label><a href="/users/login" class="li-ic">登录</a>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <!-- /.Form -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</header>

<!-- script -->
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<script>
  new WOW().init();
</script>
<script>
  $('#register_submit').click(
    function () {
      $.ajax({
        url: '/users/register/',
        type: 'POST',
        data: $('#user_register_form').serialize(),
        dataType: 'JSON',
        success: function (arg) {
          if (arg.status == 200) {
            alert("注册成功,请登录!");
            location.href = '/users/login/';
          } else {
            alert("注册失败!")
          }
        }
      });
    }
  )
</script>
</body>

</html>
